<!DOCTYPE html>
<html lang="en" class="chatBlock">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../../public/css/index.css" />
  <link rel="stylesheet" href="../../public/css/for.css" />
  <link rel="stylesheet" href="../../public/js/plugins/bootstrap/bootstrap-4.6.2-dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="./main.css" />
  <link rel="stylesheet" href="../../public/css/iframeMedia.css" />
</head>

<body>
  <div class="main-container chatBlock">
    <div class="title core-flex-center">
      <div class="text core-flex-center">李梓发</div>
    </div>
    <div class="list" id="list">
      <div class="chat" id="chat">
        <div class="time tip-color core-flex-center">09-13 13:52</div>
        <div class="item core-flex-center core-flex-justify-between">
          <div class="boxCon core-flex-center">
            <div class="icon">
              <img src="../../public/images/a1.png" />
            </div>
            <div class="talk bg-white-color core-flex-center core-flex-align-start core-flex-column">
              这次的活动看着很有趣哦，大家到时候见哦≈
            </div>
          </div>
        </div>
        <div class="item core-flex-center core-flex-justify-between">
          <div class="boxCon core-flex-center">
            <div class="icon">
              <img src="../../public/images/a1.png" />
            </div>
            <div class="talk bg-white-color core-flex-center core-flex-align-start core-flex-column">
              这次的活动看着很有趣哦，大家到时候见哦≈
            </div>
          </div>
        </div>
        <div class="item core-flex-center core-flex-justify-between">
          <div class="boxCon core-flex-center core-flex-justify-end">
            <div class="talk reply bg-white-color core-flex-center core-flex-align-start core-flex-column">
              这次的活动看着很有趣哦，大家到时候见哦≈
              这次的活动看着很有趣哦，大家到时候见哦≈
              这次的活动看着很有趣哦，大家到时候见哦≈
            </div>
            <div class="icon">
              <img src="../../public/images/a3.png" />
            </div>
          </div>
        </div>
        <div class="time newCon tip-color core-flex-center">09-13 13:52</div>
        <div class="item core-flex-center core-flex-justify-between">
          <div class="boxCon core-flex-center">
            <div class="icon">
              <img src="../../public/images/a1.png" />
            </div>
            <div class="talk bg-white-color core-flex-center core-flex-align-start core-flex-column">
              好烦好烦不知道怎么回事
            </div>
          </div>
        </div>

        <!-- <div class="item core-flex-center core-flex-justify-between">
          <div class="core-flex-center core-flex-align-baseline" style="width:100%;">
            <div
              class="talk reply bg-white-color core-flex-center core-flex-align-start c-m-r-20 c-m-t-20 c-p-20"
            >
              <div class="voice icon">
                <img src="../../public/images/v1.png" />
              </div>
              <div class="c-m-l-10">6''</div>
            </div>
            <div class="icon">
              <img src="../../public/images/a3.png" />
            </div>
          </div>
        </div> -->
      </div>

      <div class="tools">
        <div class="core-flex-center core-flex-justify-between">
          <div class="icon pointer" id="voice">
            <img src="../../public/images/b0.png" />
          </div>

          <div class="core-flex-center">
            <div class="input">
              <div class="input-group" id="StrText">
                <input type="text" class="form-control" placeholder="发送消息......." id="inputText" />
              </div>

              <div class="input-group" id="record-button">
                <button type="text" class="form-control" placeholder="发送消息......." id="">按住说话</button>
              </div>

            </div>
            <div class="topicon pointer" id="face">
              <img src="../../public/images/b1.png" />
            </div>
            <div class="topicon pointer" id="tool">
              <img src="../../public/images/b2.png" />
            </div>
            <div class="topicon pointer" id="send">
              <img src="../../public/images/b3.png" />
            </div>
          </div>
        </div>


        <div class="function" id="function">
          <div class="core-flex-center core-flex-justify-around">
            <div class="iconitem">
              <div class="icon" id="camera-icon">
                <img src="../../public/images/f1.png" />
              </div>
              <div class="text">相机</div>
            </div>
            <!-- 隐藏的文件上传 -->
            <!-- <input type="file" id="upload-input" style="display: none" /> -->
            <div class="iconitem">
              <div class="icon">
                <img src="../../public/images/r2-1.png" />
              </div>
              <div class="text">AI眼镜</div>
            </div>
            <div class="iconitem">
              <div class="icon">
                <img src="../../public/images/f3.png" />
              </div>
              <div class="text">AI语言</div>
            </div>
            <div class="iconitem">
              <div class="icon">
                <img src="../../public/images/f4.png" />
              </div>
              <div class="text">AI图片</div>
            </div>
          </div>
          <div class="core-flex-center core-flex-justify-around c-m-t-14">
            <div class="iconitem">
              <div class="icon">
                <img src="../../public/images/f5.png" />
              </div>
              <div class="text">AI宣教</div>
            </div>
            <div class="iconitem">
              <div class="icon">
                <img src="../../public/images/f6.png" />
              </div>
              <div class="text">AI病历</div>
            </div>
            <div class="iconitem">
              <div class="icon">
                <img src="../../public/images/f7.png" />
              </div>
              <div class="text">AI指南</div>
            </div>
            <div class="iconitem">
              <div class="icon">
                <img src="../../public/images/f8.png" />
              </div>
              <div class="text">AI用药</div>
            </div>
          </div>
        </div>
        <!-- 表情包显示区域 -->
        <div class="emoji-container" id="emojiContainer"></div>

      </div>
    </div>
    <!-- 点击发送语音的弹窗 -->
    <div class="mask"></div>
    <div class="recording-popup" id="recordingPopup">
      <p>正在说话...</p>
      <div class="audio-waveform" id="waveformContainer">
      </div>
      <!-- <button id="cancelButton">X</button> -->
    </div>


  </div>

  <!-- Camera Modal -->

  <div class="modal fade" id="cameraModal" tabindex="-3" aria-labelledby="cameraModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="cameraModalLabel">图片上传</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p class="popup-title">选择上传方式</p>
          <button type="button" class="btn btn-primary" id="take-photo">
            拍照
          </button>
          <button type="button" class="btn btn-info" id="upload-file">
            上传文件
          </button>
          <div id="preview-container">
            <h3>图片查看</h3>
            <div id="preview-area"></div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" id="confirmUploadImage">
            确定
          </button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>
  <script src="../../public/js/plugins/jquery/jquery.min.js"></script>
  <script src="../../public/js/plugins/bootstrap/bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>

  <script src="./main.js"></script>
</body>

</html>